<template>
  <div class="login">
      <img 
        :src="src"
        class="myvideo"

      />
      
      <div class="login_main">
          <div class="login_logo">
                <img :src="require('@/assets/images/logo.png')" alt="">
          </div>
          <!-- <p>欢迎登录</p> -->
          <div class="login_cont">
    
                 <div class="loginname">
                        <el-form
                        :model="form"
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                        ref="myfrom"
                    >
                        <el-form-item label="账号" prop="account">
                        <el-input 
                        v-model="form.account" 
                        type="userword"
                        clearable
                        placeholder="请输入账号"
                            :prefix-icon="User"
                            />
                        </el-form-item>
                        <el-form-item label="密码" prop="paw">
                        <el-input
                            v-model="form.paw"
                            type="password"
                            clearable
                            placeholder="请输入密码"
                            :prefix-icon="Lock"
                            show-password
                        />
                        </el-form-item>
                        <el-form-item>
                            <div class="form_router">
                            <router-link :to="{name:'register'}">没有账号，前去注册</router-link>
                            </div>
                        </el-form-item>
                  
                        <el-form-item>
                        <div class="btnlogin">
                            <el-button block type="success" class="btn1" @click="submitLogin">登录</el-button>
                        </div>
                        </el-form-item>
                    </el-form>
                </div>

          </div>
            
      </div>
  </div>
</template>

<script>
import {reactive,toRefs,ref} from "vue"
import {Lock,User} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
//消息提示
import { ElMessage } from 'element-plus'
//路由跳转
import {useRouter} from 'vue-router'
//ajax
import {ajax} from '@/api'
export default {
   setup(props) {
        const myfrom=ref()
        const router= useRouter()

        const submitLogin=()=>{
            myfrom.value.validate(async(valid)=>{
                
                if(valid){
                    //根据账号长度不同来判断
                    let count=state.form.account.length
                    console.log(state.form);
                    console.log(count);
                    if(count==5){
                        let res=await ajax.login(state.form)
                          //登录成功跳转到首页
                    if(res.code==200){
                    sessionStorage.setItem("token",res.token)
                    router.push({name:'main'})
                    }
                    }else if(count==6){
                        let res=await ajax.login2(state.form)
                          //登录成功跳转到首页
                    if(res.code==200){
                    sessionStorage.setItem("token",res.token)
                    router.push({name:'main'})
                    }
                    }else if(count==8){
                        console.log(8);
                        let res=await ajax.login3(state.form)
                          //登录成功跳转到首页
                    if(res.code==200){
                    sessionStorage.setItem("token",res.token)
                    router.push({name:'main'})
                    }
                    }else if(count==11){
                        console.log(11111);
                        let res=await ajax.login4(state.form)
                          //登录成功跳转到首页
                    if(res.code==200){
                    sessionStorage.setItem("token",res.token)
                    router.push({name:'main'})
                    }
                    }
                  
                }
            })
        }
       const state=reactive({
        src:require("@/assets/images/hk.gif"),
        form:{},
            User,
            Lock,
            rules:{
                account:[
                    {
                        required:true,message:'账号必填'
                    },
                     {
                        pattern:/^[0-9]/,message:'账号为数字'
                    },
                ],
                paw:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                   
                ]
            }
       })

       
       return{
           ...toRefs(state),
             myfrom,
             submitLogin
       }
       
   }
}
</script>

<style lang="scss">
.login{
    width: 100%;
    height: 100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login_main{
        height: 400px;
        width: 400px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        border: 1px solid #f5f5f5;
        background:rgba(231, 227, 227, 0.5) ;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgb(99, 98, 98);
        padding: 10px;
        p{
            color:#333;
            margin-top: 20px;
            font-size: 30px;
            width: 100%;
            text-align: center;

        }
        .login_logo{
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            flex-direction: column;
            img{
                height: 100%;
            }
        }
        .login_cont{
            margin-top:50px;
            .loginname{
                .el-form-item__label{
                    color: #fff;
                }
                .form_router{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    a{
                        color: #ff6700;
                        font-size: 14px;
                        // text-decoration: none;
                    }
                }
                .btnlogin{
                    width: 100%;
                    .btn1{
                        width: 100%;
                    }
                }
            }
            .el-tabs__nav{
                width: 100%;
                .el-tabs__active-bar{
                    background-color: #ff6700;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:#ff6700;
                }
            }
        }
    }
}
</style>